﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Oracle | Eye of the Worls - Controls</title>
    <script src="Scripts/vivagraph.js"></script>
    <link href="style/oracle.css" rel="stylesheet" />
</head>
<body>

    <div id="controls">
        <img id="avatar" alt="avatar" src="style/avatar.png" title="Oracle avatar" />
        <p>These are the core functionalities that this app offers. Please enjoy!</p>
        <br />
        <a href="index.html" class="btn">Home</a>
    </div>
    <div id="graph"></div>
    <script type='text/javascript'>

        var graph;
        var colors = [
                   "#ffc600", "#ff7e00",
                   "#9cff00", "#5ed79a",
                   "#77bdf3", "#a377f3",
                   "#d62728", "#ff9896",
                   "#9467bd", "#c5b0d5",
                   "#8c564b", "#c49c94",
                   "#e377c2", "#f7b6d2",
                   "#7f7f7f", "#c7c7c7",
                   "#bcbd22", "#dbdb8d",
                   "#17becf", "#9edae5"
        ];
        var startedOracle = false;
        if (!startedOracle) {
            startedOracle = true;
            initOracle();
        }

        function initOracle() {
            graph = Viva.Graph.graph()
            //communities = Viva.Graph.community().slpa(graph, 60, 0.30);
            var input = "mouse-wheel|mouse-wheel|0|to zoom|to zoom|1|in|in|3|out|out|2|mouse-hover|mouse-hover|4|to see|to see|5|name|name|6|of|of|7|page|page|4|click|click|5|empty space|emptyspace|2|to move|to move|7|around|around|6|page|page|2|to drag|to drag|7|around|around|6".split('|');
            var count = 0;
            for (var i = 0; i < input.length;) {
                graph.addNode(count++, { "name": input[i++], "label": input[i++], "group": parseInt(input[i++]) });
            }

            var linksInput = "0|1|1|2|1|3|4|5|5|6|6|7|7|8|9|10|10|11|11|12|9|13|13|14|14|15".split('|');
            for (var i = 0; i < linksInput.length;) {
                graph.addLink(parseInt(linksInput[i++]), parseInt(linksInput[i++]));
            }

            var layout = Viva.Graph.Layout.forceDirected(graph, {
                springLength: 150,
                springCoeff: 0.00005,
                dragCoeff: 0.03,
                gravity: -15
            });

            var graphics = Viva.Graph.View.webglGraphics();
            graphics
                .node(function (node) {
                    return Viva.Graph.View.webglSquare(12, colorsWGL[node.data.group]);
                })
                .link(function (link) {
                    return Viva.Graph.View.webglLine([-4]);
                });

            var svgGraphics = Viva.Graph.View.svgGraphics();

            svgGraphics.node(function (node) {

                //var groupId = node.communities[0].name % colors.length;
                var groupId = node.data.group;
                var offsetX = node.data.label.length * 5;
                var ui = Viva.Graph.svg('g'),
                    svgText = Viva.Graph.svg('text')
                    .attr('y', '-12px')
                    .attr('x', '-' + offsetX + 'px')
                    .attr('fill', colors[groupId])
                    .text(node.data.label),
                    circle = Viva.Graph.svg('rect')
                .attr('width', 10)
                .attr('height', 10)
                .attr('fill', colors[groupId])

                //circle = Viva.Graph.svg('circle')
                //.attr('r', 7)
                ////.attr('stroke', '#fff')
                ////.attr('stroke-width', '1px')
                //.attr("fill", colors[groupId]);


                circle.append('title').text(node.data.name);
                if (node.data.label !== "") {
                    ui.append(svgText);
                }
                ui.append(circle);
                return ui;

            }).placeNode(function (nodeUI, pos) {
                nodeUI.attr('transform',
                            'translate(' +
                                  (pos.x - 5) + ',' + (pos.y - 5) +
                            ')');
            });

            svgGraphics.link(function (link) {
                return Viva.Graph.svg('line')
                        .attr('stroke', '#ddd')
                        .attr('stroke-width', 1
                        );
            });

            var htmlGra = Viva.Graph.View.webglGraphics

            var renderer = Viva.Graph.View.renderer(graph, {
                container: document.getElementById('graph'),
                //layout: layout,
                //graphics: svgGraphics,
                graphics: svgGraphics,
                //prerender: 0,
                renderLinks: true
            });

            renderer.run();
        }
    </script>

</body>
</html>
